@import url("rem.less");
@import url("footer.less");
@width: 100%;
body {
    background: #f3f3f3;
}

#goTop,
.dis-tab {
    position: fixed;
    text-align: center;
    background: #fff;
    z-index: 99;
    display: none;
}

.dis-tab {
    width: @width;
    .fz(55);
    .pt(45);
    .pb(45);
}

#goTop {
    border-radius: 100%;
    right: 3%;
    bottom: 10%;
    .w(135);
    .h(135);
    color: #27abc0;
    .lh(130);
    .fz(85);
    border: 1px solid #27abc0;
    box-sizing: border-box;
    cursor: pointer;
}

.header {
    margin-bottom: 5%;
    background: #fff;
    .banner {
        a:first-child {
            img {
                width: @width;
            }
        }
        position: relative;
        a:last-child {
            position: absolute;
            left: 50%;
            margin-left: -10%;
            bottom: 10%;
            color: #ed482a;
            font-weight: bold;
            .fz(55)
        }
    }
    .column {
        padding: 5%;
        .col-top {
            a {
                img {
                    width: @width;
                }
            }
        }
        .col-bottom {
            display: flex;
            justify-content: space-around;
            align-items: center;
            a {
                display: block;
                width: 30%;
                margin: 1% 0;
                img {
                    width: @width;
                }
                i {
                    color: #ccc;
                    .fz(200);
                }
            }
            a:last-child {
                width: 5%;
            }
        }
    }
}

.main {
    width: 100%;
    .guild {
        background: #fff;
        padding: 2%;
        .title {
            width: @width;
            margin-bottom: 2%;
            .fz(45);
            h3 {
                float: left;
                padding: 0.5% 0;
                margin: 0 1%;
                .fz(50)
            }
            .time {
                span {
                    display: inline-block;
                    .pl(15);
                    .pr(15);
                    .pt(15);
                    .pb(15);
                    .fz(40);
                    border: 1px solid #ccc;
                    text-align: center;
                }
            }
        }
        .list {
            width: @width;
            display: flex;
            justify-content: space-around;
            dl {
                width: 30%;
                dt {
                    img {
                        width: @width;
                    }
                }
                dd {
                    p {
                        width: 90%;
                        overflow: hidden;
                        word-break: keep-all;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        margin: 2% 0;
                        .fz(45)
                    }
                    h3 {
                        color: #fd8411;
                        .fz(48);
                        a {
                            .fz(32);
                            color: #ccc;
                            text-decoration: line-through;
                        }
                    }
                }
            }
        }
    }
    .service {
        .title {
            p {
                margin: 2% auto;
                .w(300);
                .pl(15);
                .pr(15);
                font-weight: bold;
                text-align: center;
                background-image: url(../img/find-imgs/images_03.png);
                background-repeat: no-repeat;
                background-size: 100%;
                .fz(45)
            }
        }
    }
    .active-nav {
        border-bottom: 3px solid #00bcd4;
        box-sizing: border-box;
        color: #00bcd4;
    }
    .content-one {
        .container {
            width: @width;
            background: #fff;
            overflow: hidden;
            .sel {
                width: auto;
                padding: 0 2%;
                ul {
                    display: flex;
                    justify-content: space-between;
                    li {
                        width: 30%;
                        .pt(30);
                        .pb(30);
                        .fz(42);
                        text-align: center;
                        transition:all 1s ease;
                    }
                    li:hover{
                        border-bottom: 3px solid #00bcd4;
                        box-sizing: border-box;
                        color: #00bcd4;
                    }
                }
            }
            .swiper-container3 {
                .mt(20);
                .opts {
                    width:@width;
                    .opts-list {
                        width: @width;
                        .optsl-top {
                            .ml(20);
                            .mr(20);
                            position: relative;
                            a {
                                display: block;
                                width: @width;
                                img {
                                    width: @width;
                                }
                            }
                            dl {
                                position: absolute;
                                left: 5%;
                                bottom: 10%;
                                display: flex;
                                align-items: center;
                                dt {
                                    width: 20%;
                                    img {
                                        width: @width;
                                    }
                                }
                                dd {
                                    color: #fff;
                                    p {
                                        .fz(50)
                                    }
                                }
                            }
                        }
                        .optsl-bottom {
                            .ml(20);
                            .mr(20);
                            dl {
                                display: flex;
                                margin: 2% 0;
                                dt {
                                    width: 20%;
                                    .mr(35);
                                    img {
                                        width: @width;
                                    }
                                }
                                dd {
                                    h4 {
                                        .fz(50);
                                        .mt(20)
                                    }
                                    p {
                                        .fz(45);
                                        color: #b3b3b3;
                                    }
                                    p:last-child {
                                        .mt(40);
                                        .pl(70);
                                        background: url(../img/find-imgs/img-icon-small.png) no-repeat left center;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .content-two {
        width: auto;
        .container {
            width: @width;
            background: #fff;
            overflow: hidden;
            .nav-list {
                width: @width;
                .swiper-wrapper {
                    width: @width;
                    .swiper-slide {
                        text-align: center;
                        .fz(45);
                        .pt(35);
                        .pb(35)
                    }
                }
            }
            .swiper-container-opts {
                .mt(33);
                .swiper-slide {
                    .opts-list {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-around;
                        dl {
                            .mb(60);
                            dd {
                                h4 {
                                    .fz(50);
                                    width: 90%;
                                    overflow: hidden;
                                    word-break: keep-all;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                    margin: 3% 0;
                                }
                                p {
                                    color: #9d9d9d;
                                    .fz(37);
                                    .mt(10);
                                    .mb(10);
                                }
                                p:last-child {
                                    float: left;
                                    .fz(32);
                                    border: 1px solid #9d9d9d;
                                    border-left: none;
                                    border-right: none;
                                    .pl(12);
                                    .pr(12);
                                }
                            }
                        }
                        dl:first-child {
                            width: 92%;
                            dt {
                                img {
                                    width: @width;
                                }
                            }
                        }
                        dl:not(:first-child) {
                            width: 43%;
                            dt {
                                img {
                                    width: @width;
                                }
                            }
                        }
                    }
                    .see-move {
                        width: @width;
                        p {
                            width: @width;
                            .fz(42);
                            color: #a0a0a0;
                            text-align: center;
                            .pt(55);
                            .pb(55);
                            border-top: 1px solid #ccc;
                            i {
                                .fz(70);
                                .pl(20)
                            }
                        }
                    }
                }
            }
        }
    }
    .content-three {
        .mb(160);
        .swiper-container {
            width: @width;
            .h(580);
            position: relative;
            .swiper-slide {
                background-position: center;
                background-size: cover;
                width: 65%;
                .h(210);
                img {
                    width: @width;
                }
                p {
                    .fz(20);
                    .pl(15);
                    .pt(15);
                    .pb(15);
                    width:@width;
                    overflow: hidden;
                    word-break: keep-all;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    background: #fff;
                    span {
                        color: #ff8300;
                    }
                }
            }
            .swiper-pagination {
                position: absolute;
                bottom: 10%;
            }
        }
    }
}

